<template>
  <div class="app-header-sticky" :class="{show:isShow}">
    <div class="container" v-if="isShow">
      <!-- <RouterLink class="logo" to="/" /> -->
      <h1 class="logo"><RouterLink to="/">日用百货</RouterLink></h1>
      <AppHeaderNav />
      <div class="right">
        <RouterLink to="/" >品牌</RouterLink>
        <RouterLink to="/" >专题</RouterLink>
      </div>
    </div>
  </div>
</template>

<script>
import AppHeaderNav from './header-nav.vue'
import { onMounted, ref } from 'vue'
// 使用组件库
// import { useWindowScroll } from '@vueuse/core'
export default {
  name: 'AppHeaderSticky',
  components: { AppHeaderNav },
  // 原始代码实现   吸顶效果
  setup () {
    // 记录Y轴的上升高度
    const isShow = ref(false)
    // 当页面滚动时更新
    onMounted(() => {
      window.onscroll = () => {
        const scrollTop = document.documentElement.scrollTop
        if (scrollTop >= 78) {
          isShow.value = true
        } else {
          isShow.value = false
        }
      }
    })
    return { isShow }
  }
  // setup () {
  //   // 解构出的 y 是响应式数据
  //   const { y } = useWindowScroll()
  //   // 直接返回给模板使用
  //   return { y }
  // }
}
</script>

<style scoped lang="less">
@import '../assets/styles/variable.less';
.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  transform: translateY(-100%);
  opacity: 0;
  &.show{
    transition: all 0.3s linear;
    transform: translateY(0);
    opacity: 1;
  }
  .container {
    display: flex;
    align-items: center;
  }
  .logo {
     a {
      display: block;
      height: 80px;
      width: 100%;
      // text-indent: -9999px;
      // background: url('../assets/images/tupian.jpg') no-repeat center 30px / contain;
      color: @c;
      text-align: center;
      line-height: 80px;
    }
    width: 200px;
    height: 80px;
    // background: url(~@/assets/images/logo.png) no-repeat  right 2px;
    background-size: 160px auto;
  }
  .right {
    width: 220px;
    display: flex;
    text-align: center;
    padding-left: 40px;
    border-left: 2px solid @c;
    a {
      width: 38px;
      margin-right: 40px;
      font-size: 16px;
      line-height: 1;
      &:hover {
        color: @c;
      }
    }
  }
}
</style>
